<template>
  <div class="class-card">
    <van-grid :border="false" :column-num="3" :center="false">
      <van-grid-item v-for="item in 20" :key="item">
        <template #icon>
          <div class="card-img" :style="`background-image:url(${url})`">
            <van-tag type="warning">VIP</van-tag>
            <span>6.6亿次播放</span>
          </div>
        </template>
        <template #text>
          <div class="card-name">
            <span>原始生活</span>
            <span>全11集</span>
          </div>
        </template>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity"
let url = ref('https://img.yzcdn.cn/vant/cat.jpeg')
</script>
<style scoped lang='scss'>
.class-card {
  box-sizing: border-box;
  ::v-deep .van-grid-item__content {
    padding-top: 0px;
  }
  .card-img {
    box-sizing: border-box;
    height: 130px;
    padding: 6px;
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & > span:nth-child(1) {
      align-self: flex-end;
    }
    & > span:nth-child(2) {
      align-self: flex-start;
      color: aliceblue;
    }
  }
  .card-name {
    display: flex;
    flex-direction: column;
    & > span:nth-child(2) {
      color: #666666;
    }
  }
}
</style>